<template>
	<uni-transition :mode-class="['slide-left']" :styles="tranStyles" :show="show">
		<view class="d-flex flex-column overflow-hidden">
			<view class="search-box">
				<view class="search-input">
					<image src="/static/images/common/search-icon.png" class="search-icon"></image>
					<input type="text" v-model="keyword" 
							placeholder="搜个芝字试试看" 
							placeholder-class="placeholder" @input="handleKeywordInput">
				    <image v-if="keyword" src="/static/images/common/image-delete.png" class="close-icon" @tap="clear" />
				</view>
				<view class="ml-30" @tap="hide">取消</view>
			</view>
			<scroll-view class="result" scroll-y>
				<template v-if="!result.length">
					<view class="section">
						<view class="header">
							<view class="title">历史搜索</view>
							<view class="subtitle">
								<image src="/static/images/common/delete.png"></image>
								<view>清除</view>
							</view>
						</view>
						<view class="list">
							<view class="item" v-for="(item, index) in historySearch" :key="index" @tap="handleChoose(item)">
								{{ item.productName }}
							</view>
						</view>
					</view>
					<view class="section">
						<view class="header">
							<view class="title">热门推荐</view>
						</view>
						<view class="list">
							<view class="item" v-for="(item, index) in hotSearch" :key="index" @tap="handleChoose(item)">
								<view class="name">{{ item.productName }}</view>
								<image v-if="item.nameImage" :src="item.nameImage" class="name-image"></image>
							</view>
						</view>
					</view>
				</template>
				<template v-else>
					<view class="wrapper" style="padding: 0 30rpx 30rpx 0;">
						<view class="product" v-for="(item, index) in result" :key="index" @tap="handleChoose(item, true)">
							<view class="d-flex align-items-center">
								<image :src="item.images[0].url" class="pro-image"/>
								<view class="pro-name">{{ item.name }}</view>
							</view>
							<view class="pro-price">￥{{ item.price }}</view>
						</view>
					</view>
				</template>
			</scroll-view>
			</view>
		</view>
	</uni-transition>
</template>

<script>
	import uniTransition from '@/components/uni-transition/uni-transition.vue'
	export default {
		name: 'Search',
		components: {
			uniTransition
		},
		props: {
			show: {
				type: Boolean,
				default: false
			},
			categories: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				tranStyles: {
					width: '100%',
					position: 'absolute',
					top: 0,
					left: 0,
					bottom: 0,
					backgroundColor: '#fff',
					zIndex: 998
				},
				hotSearch: [],
				historySearch: [],
				keyword: '',
				result: []
			}
		},
		async created() {
			this.hotSearch = await this.$api('hotSearch')
			this.historySearch = await this.$api('historySearch')
		},
		methods: {
			hide() {
				this.keyword = ''
				this.result = []
				this.$emit('hide')
			},
			handleChoose(item, isSearch = false) {
				if(isSearch) {
					this.hide()
					this.$emit('choose', item)
					return
				}
				this.categories.forEach(category => {
					const find = category.products.find(product => product.id == item.productId)
					if(find) {
						this.hide()
						this.$emit('choose', find)
						return
					}
				})
			},
			handleKeywordInput(e) {
				//为了方便，这里使用商品列表的数据来筛选结果
				const {value} = e.detail
				
				if(!value) {
					this.result = []
					return
				}
				
				let result = []
				this.categories.forEach(category => {
					category.products.forEach(product => {
						if(product.name.indexOf(value) > -1) {
							result.push(product)
						}
					})
				})
				setTimeout(() => this.result = result, 300)
			},
			clear() {
				this.keyword=''
				this.result = []
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-box {
		height: 100rpx;
		padding: 20rpx 30rpx;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid rgba($color: #c8c7cc, $alpha: 0.6);
		
		.search-input {
			flex: 1;
			height: 60rpx;
			padding: 10rpx 20rpx;
			background-color: #f7f7f7;
			font-size: 26rpx;
			border-radius: 50rem !important;
			display: flex;
			align-items: center;

			.search-icon {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}
			
			input {
				flex: 1;
			}
			
			.close-icon {
				width: 30rpx;
				height: 30rpx;
				margin-left: 20rpx;
			}
		}
	}
	
	.section {
		padding: 30rpx;
		
		.header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;
			
			.title {
				font-size: 28rpx;
				color: #343434;
			}
			
			.subtitle {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #777;
				
				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
		
		.list {
			display: flex;
			flex-wrap: wrap;
			
			.item {
				background-color: #f5f5f7;
				padding: 10rpx 20rpx;
				font-size: 24rpx;
				color: #666;
				border-radius: 50rem !important;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				
				.name-image {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}
	}
	
	.result {
		height: calc(100vh - 120rpx);
		/* #ifdef H5 */
		height: calc(100vh - 120rpx - 100rpx);
		/* #endif */
		overflow: hidden;
		
		.product {
			padding: 20rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 26rpx;
			
			.pro-image {
				width: 144rpx;
				height: 108rpx;
			}
			
			.pro-price {
				font-weight: 500 !important;
			}
		}
	}
</style>
